<template>
  <div id="homePage">
    <!-- echarts展示列表 -->
    <div class="flex_row order_box">
      <!-- 全部订单 -->
      <!-- <div class="record_show_box"> -->
      <div class="section pos_relativ record_show cur">
        <div class="flex_column">
          <div class="all_order flex_column">
            <span class="all_order_num">全部订单量</span>
            <span class="section_title all_ord_num">{{ orderStatistics.mouth_all || '--' }}</span>
          </div>
          <div class="today_order flex_column">
            <span class="today_ord">今日订单量</span>
            <span class="today_ord_num" style="color: #6c9ff2">{{ orderStatistics.day_all || '--' }}</span>
          </div>
        </div>
        <!-- echarts -->
        <div style="width: 50%; height: 100%" class="imgBox">
          <img src="../assets/img/homeImg/all.png" alt="全部订单" style="width: 100%; height: 100%">
        </div>
      </div>
      <!-- </div> -->

      <!-- 售后 -->
      <div class="section pos_relativ record_show cur">
        <div class="flex_column">
          <div class="all_order flex_column">
            <span class="all_order_num">售后订单量</span>
            <span class="section_title all_ord_num">{{ orderStatistics.mouth_after_sales || '--' }}</span>
          </div>
          <div class="today_order flex_column">
            <span class="today_ord">今日订单量</span>
            <span class="today_ord_num" style="color: #faad14">{{ orderStatistics.day_after_sales || '--' }}</span>
          </div>
        </div>
        <!-- echarts -->
        <div style="width: 50%; height: 100%" class="imgBox">
          <img src="../assets/img/homeImg/after.png" alt="售后订单" style="width: 100%; height: 100%">
        </div>
      </div>
      <!-- 取消单 -->
      <div class="section pos_relativ record_show cur">
        <div class="flex_column">
          <div class="all_order flex_column">
            <span class="all_order_num">取消订单量</span>
            <span class="section_title all_ord_num">{{ orderStatistics.mouth_cancel || '--' }}</span>
          </div>
          <div class="today_order flex_column">
            <span class="today_ord">今日订单量</span>
            <span class="today_ord_num" style="color: #5fc6b9">{{ orderStatistics.day_cancel || '--' }}</span>
          </div>
        </div>
        <!-- echarts -->
        <div style="width: 50%; height: 100%" class="imgBox">
          <img src="../assets/img/homeImg/cancl.png" alt="取消订单" style="width: 100%; height: 100%">
        </div>
      </div>
      <!-- 待审核 -->
      <div class="section pos_relativ record_show cur">
        <div class="flex_column">
          <div class="all_order flex_column">
            <span class="all_order_num">待审核订单量</span>
            <span class="section_title all_ord_num">{{ orderStatistics.mouth_wait_pending || '--' }}</span>
          </div>
          <div class="today_order flex_column">
            <span class="today_ord">今日订单量</span>
            <span class="today_ord_num" style="color: #eb7466">{{ orderStatistics.day_wait_pending || '--' }}</span>
          </div>
        </div>
        <!-- echarts -->
        <div style="width: 50%; height: 100%" class="imgBox">
          <img src="../assets/img/homeImg/delay.png" alt="延迟订单" style="width: 100%; height: 100%">
        </div>
      </div>
    </div>
    <div class="flex_row">
      <!-- 我的待办 -->
      <!-- <div class="section rect_box">
        <div class="my_work flex_b_center">
          <span class="section_title">我的待办</span>
          <span class="msg_tip">共有6条代办事项</span>
        </div>
        <div class="infinite-list-wrapper" style="height: 100%; overflow: auto">
          <ul class="list" infinite-scroll-disabled="disabled">
            <li v-for="(item, index) in agentList" :key="index" class="agent_content flex_b_center cur">
              <div class="agent_notice flex_row agentTop" style="max-width: 78%">
                <span class="ag_red_box">{{ item.stateMsg }}</span>
                <p class="agent_order">
                  {{ item.dealerName }}发起订单号<span>{{ item.orderNumber }}</span>等待<span class="design_rev">{{ item.jobName }}</span>，请尽快处理.
                </p>
              </div>
              <div class="agent_time" style="padding-right: 10px">
                <span>{{ item.createTime }}</span>
              </div>
            </li>
          </ul>
          <p v-if="loading" style="text-align: center; padding-top: 20px; padding-bottom: 20px; font-size: 16px">加载中...</p>
          <p v-if="noMore" style="text-align: center; padding-top: 20px; padding-bottom: 20px; font-size: 16px">没有更多了~</p>
        </div>
      </div> -->
      <!-- 公告列表 -->
      <div class="section big_box">
        <div class="my_work flex_b_center">
          <span class="section_title">公告列表</span>
          <span class="msg_tip cur">查看全部</span>
        </div>
        <!-- 下拉刷新 -->
        <div class="infinite-list-wrapper" style="height: 100%; overflow: auto; padding-right: 10px">
          <ul class="list" infinite-scroll-disabled="disabledNotic">
            <li v-for="(item, index) in noticList" :key="index" class="gent_notice flex_row notice_top cur">
              <div class="notice_box">
                <img class="noticImg" :src="item.attachmentPath" alt="" width="100%">
              </div>
              <div class="flex_row notice_cont">
                <div class="notice_tip flex_column">
                  <div class="nodata notice_title">
                    <span>{{ item.creatName }}</span>:<span>{{ item.headline }}</span>
                    <span :class="{ notic_reading: item.isRead == 0 }" />
                  </div>
                  <p class="notic_details nodata msg_tip">{{ item.content }}</p>
                </div>
                <div class="notice_time">
                  <span>{{ item.createdTime }}</span>
                </div>
              </div>
            </li>
          </ul>
          <!-- <p v-if="loadings" style="text-align: center; padding-top: 20px; padding-bottom: 20px; font-size: 16px">加载中...</p>
          <p v-if="noMoreNotic" style="text-align: center; padding-top: 20px; padding-bottom: 20px; font-size: 16px">没有更多了~</p> -->
        </div>
      </div>
    </div>

    <div class="flex_row pad_top">
      <!-- 订单趋势 -->
      <div class="section rect_box">
        <div class="my_work flex_b_center">
          <div class="flex_1">
            <span class="section_title">订单量趋势</span>
          </div>
          <div class="slef_time cur self_padd">
            <div class="slef_time cur self_padd" :class="{ red_bg: isOeSelf == true }" @click="selfTime">
              <span>自定义时间</span>
              <template v-if="isSelf">
                <div class="block">
                  <el-date-picker v-model="paramDureTime" class="my-search_datetime" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="-" start-placeholder="查询开始日期" end-placeholder="查询结束日期" />
                </div>
              </template>
            </div>
            <div class="self_padd" :class="{ red_bg: isOrMonth == true }" @click="oneMonth">近1月</div>
            <div class="self_padd seven" :class="{ red_bg: isAfter == true }" @click="seven">近七日</div>
          </div>
        </div>
        <div id="line" style="max-width: 73%" height="400px" />
      </div>
      <!-- 售后订单量 -->
      <div class="section big_rect_box">
        <div class="my_work flex_b_center">
          <div class="flex_1">
            <span class="section_title">售后订单量</span>
          </div>
          <div class="slef_time cur self_padd">
            <div class="slef_time cur self_padd" :class="{ red_bg: isAfterSelf == true }" @click="aftSelf">
              <span>自定义时间</span>
              <template v-if="isAfterSelf">
                <div class="aftBlock">
                  <el-date-picker v-model="paramDureTimes" class="my-search_datetime" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="-" start-placeholder="查询开始日期" end-placeholder="查询结束日期" />
                </div>
              </template>
            </div>
            <div class="self_padd" :class="{ red_bg: isAfterMon == true }" @click="aftMon">
              近1月
            </div>
            <div class="self_padd seven" :class="{ red_bg: isAfterSev == true }" @click="aftSeve">
              近七日
            </div>
          </div>
        </div>
        <div id="eare" style="max-width:90%" />
      </div>
    </div>
  </div>
</template>

<script>
import furniture1 from '../assets/img/show.jpg'
const echarts = require('echarts')
export default {
  name: 'HomePage',
  data() {
    return {
      paramDureTime: [],
      paramDureTimes: [],
      norOrderCreatTime: ['21-09-08', '21-09-09', '21-09-10', '21-09-11', '21-09-12', '21-09-13', '21-09-14'],
      norOrderNum: ['1', 0, 0, 0, '2', '12', 0],
      canOrderNum: [0, 0, 0, 0, 0, 0],
      afterListNum: [0, 1, 0, 0, 0, 0],
      afterListTime: ['21-09-08', '21-09-09', '21-09-10', '21-09-11', '21-09-12', '21-09-13', '21-09-14'],
      // 代办数据
      agentList: [
        {
          stateMsg: '待审核',
          dealerName: '新世纪',
          orderNumber: '01.003202109130040',
          jobName: '客服审核',
          createTime: '2021-09-13 17:28:45'
        },
        {
          stateMsg: '待审核',
          dealerName: '罗森便利店',
          orderNumber: '01.003202109130040',
          jobName: '客服审核',
          createTime: '2021-09-13 17:28:45'
        },
        {
          stateMsg: '待审核',
          dealerName: '永辉超市',
          orderNumber: '01.003202109130040',
          jobName: '客服审核',
          createTime: '2021-09-13 17:28:45'
        },
        {
          stateMsg: '待审核',
          dealerName: '永辉超市',
          orderNumber: '01.003202109130040',
          jobName: '客服审核',
          createTime: '2021-09-13 17:28:45'
        },
        {
          stateMsg: '待审核',
          dealerName: '万达超市',
          orderNumber: '01.003202109130040',
          jobName: '客服审核',
          createTime: '2021-09-13 17:28:45'
        },
        {
          stateMsg: '待审核',
          dealerName: '红旗超市',
          orderNumber: '01.003202109130040',
          jobName: '客服审核',
          createTime: '2021-09-13 17:28:45'
        }
      ],
      // 公告数据
      noticList: [
        {
          attachmentPath: furniture1,
          creatName: '系统管理员',
          headline: 'iPhone 12突然降价1547块，史上最便宜iPhone 12突然降价1547块，史上最便宜',
          isRead: '0',
          content: '95',
          createdTime: '2021-08-24 14:26:18'
        },
        {
          attachmentPath: furniture1,
          creatName: '系统管理员',
          headline: '手机同行相杀一加手机也降价1499元 氢OS不让小米魅族刷',
          isRead: '0',
          content: '4682',
          createdTime: '2021-08-24 14:26:18'
        },
        {
          attachmentPath: furniture1,
          creatName: '系统管理员',
          headline: '最具悲情的麒麟955手机，发布一年降价跌破三千-955蓝屏',
          isRead: '0',
          content: '152',
          createdTime: '2021-08-24 14:26:18'
        },
        {
          attachmentPath: furniture1,
          creatName: '系统管理员',
          headline: '苹果 iPhone 11 最高降价 1600 元，iPhone 12 发布时将',
          isRead: '0',
          content: '1234',
          createdTime: '2021-08-24 14:26:18'
        }
      ],
      // 获取全部订单/取消单参数
      jsonObj: {
        timeFrame: 'week',
        endTime: '',
        startTime: ''
      },
      jsonObjB: {
        timeFrame: 'week',
        endTime: '',
        startTime: ''
      },
      isSelf: false,
      isAfterSelf: false,
      // list: [],
      isRed: 2, // 自定义时间背景色标识
      isAfter: true,
      isOrMonth: false,
      isOeSelf: false,
      // timeArr: [],
      isactive: false,
      // 售后订单
      isAfterSev: true,
      isAfterMon: false,
      // 订单统计
      orderStatistics: {
        // day_all: 0, // 今天所有订单
        // mouth_all: 0, // 本月所有订单
        // day_after_sales: 0, // 今天售后订单
        // mouth_after_sales: 0, // 本月售后订单
        // day_cancel: 0, // 今天取消订单
        // mouth_cancel: 0, // 今天取消订单
        // day_wait_pending: 0, // 今天待审核订单
        // mouth_wait_pending: 0 // 今天待审核订单
      },
      // 登录用户Id
      customerInfo: null
    }
  },
  created() {
    this.customerInfo = this.$getLocalItem('customerInfo') || null
    this.init()
  },
  mounted() {
    this.changeEare()
    this.changLine()
  },
  methods: {
    init() {
      // 获取当前订单统计
      this.reqOrderStatistics()
    },
    // 获取当前订单统计
    reqOrderStatistics() {
      this.$http.get('/ly-oms-servicer/order/count', { customerId: this.customerInfo ? this.customerInfo.id : null }, res => {
        if (res.code == 0) {
          this.orderStatistics = res.responseBody ? res.responseBody : {}
        }
      })
    },
    // 时间分段
    splitTime(len) {
      if (len <= 10) {
        return 0
      } else if (len > 10 <= 31) {
        return 4
      } else if (len > 31 <= 186) {
        return 20
      } else if (len > 186 <= 365) {
        return 31
      } else {
        return 365
      }
    },
    aftSeve() {
      this.jsonObjB.timeFrame = 'week'
      this.isAfterSelf = false
      this.isAfterSev = true
      this.isAfterMon = false
      this.isAfterSelf = false
    },
    aftMon() {
      this.jsonObjB.timeFrame = 'month'
      this.isAfterSelf = false
      this.isAfterSev = false
      this.isAfterMon = true
      this.isAfterSelf = false
    },
    aftSelf() {
      this.jsonObj.timeFrame = ''
      this.isAfterSelf = true
      this.isAfterSev = false
      this.isAfterMon = false
      this.isAfterSelf = true
    },
    // 近七日
    seven() {
      this.jsonObj.timeFrame = 'week'
      this.isSelf = false
      this.isAfter = true
      this.isOeSelf = false
      this.isOrMonth = false
    },
    oneMonth() {
      this.jsonObj.timeFrame = 'month'
      this.isSelf = false
      this.isAfter = false
      this.isOeSelf = false
      this.isOrMonth = true
    },
    selfTime() {
      this.isSelf = true
      this.isAfter = false
      this.isOeSelf = true
      this.isOrMonth = false
      // this.getNum()
    },

    // 折线图
    changLine() {
      var option
      option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '5%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          axisLabel: {
            interval: this.splitTime(this.norOrderCreatTime.length),
            rotate: 60
          },
          type: 'category',
          boundaryGap: false,
          data: this.norOrderCreatTime
        },
        yAxis: {
          type: 'value'
          // min: 0,
          // max: 50,
        },
        series: [
          {
            name: '正常订单',
            type: 'line',
            // stack: '',
            data: this.norOrderNum
          },
          {
            name: '取消订单',
            type: 'line',
            // stack: '',
            data: this.canOrderNum
          }
        ]
      }
      this.$nextTick(() => {
        // console.log(343)
        this.op('line', option)
      })
    },
    // 面积图
    changeEare() {
      var option = {
        xAxis: {
          axisLabel: {
            interval: this.splitTime(this.afterListTime.length),
            rotate: 60
          },
          type: 'category',
          boundaryGap: false,
          data: this.afterListTime
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          axixPointer: {
            type: 'cross'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            data: this.afterListNum,
            type: 'line',
            areaStyle: {}
          }
        ],
        backgroundStyle: {
          color: '#B9DDFF'
        },
        itemStyle: {
          color: '#B9DDFF'
        }
      }

      this.$nextTick(() => {
        this.op('eare', option)
      })
    },
    // changeChart() {
    //   // 绘制图表
    //   var option
    //   option = {
    //     xAxis: {
    //       type: 'category',
    //       show: false,
    //       data: ['全部订单量', '售后订单量', '取消订单量', '延期订单量'],
    //     },
    //     yAxis: {
    //       type: 'value',
    //       show: false,
    //       max: 0,
    //     },
    //     grid: {
    //       left: '3%',
    //       right: '2%',
    //     },
    //     series: [
    //       {
    //         data: [],
    //         type: 'bar',
    //         itemStyle: {
    //           color: '#FEF2E6',
    //         },
    //         showBackground: true,
    //         backgroundStyle: {
    //           color: '#EEF6FC',
    //         },
    //       },
    //     ],
    //   }
    //   this.$nextTick(() => {
    //     for (let i = 0; i < this.chartsName.length; i++) {
    //       // option.series[0].itemStyle.color = this.orderType[i].cor
    //       // option.series[0].backgroundStyle.color = this.orderType[i].bgCor
    //       // option.yAxis.max = this.allArr[i]
    //       // option.series[0].data = this.allOrd[i]
    //       // // console.log(option.yAxis.max)
    //       // // console.log(option.series[0].data)
    //       // this.op(this.chartsName[i].echarts, option)
    //     }
    //   })
    // },
    // 配置项
    op(str, option) {
      var myChart = echarts.init(document.getElementById(str)) // echartsExample是显示echart的元素id
      // myChart.clear()
      myChart.setOption(option, true)
    }
  }
}
</script>

<style lang="scss" scoped>
#homePage {
  .order_box {
    display: flex;
    justify-content: space-between;
    // padding-right: 10px;
    .pos_relativ {
      position: relative;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      width: 32%;
      padding-left: 15px;
      height: 123px;
    }
  }
  .big_box {
    width: 100%;
  }
  .all_ord_num {
    box-sizing: border-box;
    padding-top: 5px;
    font-size: 18px;
  }
  .all_order_num {
    box-sizing: border-box;
    font-weight: 700;
  }
  .today_order {
    box-sizing: border-box;
    padding-top: 12px;
  }
  .today_ord {
    box-sizing: border-box;
    color: #666;
  }
  .today_ord_num {
    color: #6298f1;
    font-weight: 700;
    box-sizing: border-box;
    padding-top: 3px;
  }
  #echartsExample {
    position: absolute;
    right: 0px;
    bottom: 23px;
    box-sizing: border-box;
    width: 56%;
    height: 50%;
  }
  .ag_red_box {
    display: inline-block;
    box-sizing: border-box;
    margin-top: -4px;
    text-align: center;
    width: 60px;
    height: 24px;
    line-height: 24px;
    background: #f8e9eb;
    color: #be2a37;
    border-top-left-radius: 7px 7px;
    border-bottom-right-radius: 7px 7px;
  }
  .design_rev {
    color: #4284ee;
  }
  .notice_box {
    width: 20%;
    max-width: 60px;
    height: 55px;
  }
  .notice_top {
    box-sizing: border-box;
    padding-top: 20px;
  }
  .notic_details {
    padding-top: 0;
    color: #8d8d8d;
  }
  .notice_title {
    padding-top: 0px;
    font-weight: 700;
  }
  .notice_tip {
    width: 92%;
    flex: 1;
  }
  .notic_reading {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #f95e5a;
    box-sizing: border-box;
    margin-left: 8px;
    margin-bottom: 2px;
  }
  .bg {
    opacity: 0;
  }
  .notice_time {
    color: #8d8d8d;
  }
  .slef_time {
    box-sizing: border-box;
    padding-left: 20px;
  }
  #line {
    position: relative;
    left: 7%;
    width: 100%;
    height: 260px;
  }
  .self_padd {
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    margin-right: 40px;
  }
  .self_padd:nth-child(3) {
    box-sizing: border-box;
    margin-right: 0px;
  }
  .slef_time {
    display: flex;
    align-items: center;
  }
  .red_bg {
    display: inline-block;
    padding: 0 15px;
    height: 20px;
    background-color: #be2a37;
    color: #fff;
    text-align: center;
    line-height: 20px;
    border-radius: 10px;
  }
  .after_box {
    // box-sizing: border-box;
    width: 35.5%;
    margin-left: 0;
    margin-top: 0;
  }
  .footer {
    width: 100%;
    height: 50px;
    background: #595959;
    margin-top: 10px;
    text-align: center;
    line-height: 50px;
    color: #b7b7b7;
  }
  .remark_msg {
    font-size: 12px;
  }

  .pad_top {
    position: relative;
  }
  .block {
    position: absolute;
    top: 15px;
    left: 150px;
  }
  .aftBlock {
    position: absolute;
    top: 15px;
    right: 310px;
  }
  .notice_cont {
    width: 100%;
    justify-content: space-between;
  }
  .noticImg {
    width: 100%;
    height: 100%;
    display: inline-block;
    border-radius: 3px;
    object-fit: cover;
  }
  #eare {
    position: relative;
    left: 8%;
    width: 100%;
    height: 260px;
  }
}
</style>
